<template>
  <div class="box">
    <!--
     区别原生事件与自定义事件
        原生事件
          原生标签上绑定 / 组件标签上绑定加.native
          事件名是特定的一些
          事件对象 / $event: 包含事件相关信息的数据对象，如：pageX/pageY/target/keyCode
        自定义事件
          组件标签上绑定（不加.native）
          事件名是任意名称
          事件对象/ $event: $emit分发时指定的数据，可以是任意类型，甚至是undefined
     -->
    <h1>组件间通信2：vue自定义事件</h1>
    <h2>原生事件监听</h2>
    <button @click="showMsg1">原生事件1</button>
    <button @click="showMsg1($event)">原生事件2</button>
    <!-- vue2.x中需要使用.native修饰 -->
    <Event1 @click.native="showMsg1" />
    <!-- vue3.x中不再需要使用.native修饰 -->
    <Event1 @click="showMsg1" />
    <hr/>
    <h2>自定义事件监听</h2>
    <Event2 @click="showMsg2" @xxx="showMsg3" @increment="increment" />
    <h3>{{count}}</h3>
  </div>
</template>

<script lang="ts" name="EventTest" setup>
  import {ref} from "vue";
  import Event1 from "./Event1.vue";
  import Event2 from "./Event2.vue";

  //原生事件所用的回调
  const showMsg1 = (event: MouseEvent) => {
    console.log(event)
    console.log((event.target as HTMLElement).innerHTML)
  }
  // 自定义事件所需回调（showMsg2和showMsg3和increment）
  const showMsg2 = (event: string) => {
    console.log(event)
  }
  const showMsg3 = (event: object) => {
    console.log(event)
  }
  const count = ref(10)
  const increment = (num: number) => {
    count.value +=num
  }
</script>

<style scoped>

</style>
